<template>
  <div class="info-page">
    <cp-nav-bar title="个人信息" />
    <!-- <img class="infoImg" src="@/assets/mine/avatar.png" alt=""> -->
    <van-uploader class="infoImg" v-model="fileList" reupload max-count="1" :deletable="false"
      :after-read="afterRead" />
    <van-form autocomplete="off" @submit="onSubmit" ref="form" class="infoForm">
      <van-field name="nickName" label="昵称" v-model="queryparams.nickName" placeholder="请输入昵称" :rules="nicknameRules"
        required></van-field>
      <van-field v-model="queryparams.gender" is-link readonly name="gender" label="性别" placeholder="请选择性别"
        :rules="genderRules" required @click="showPicker = true" />
      <van-field name="phone" label="手机号" v-model="queryparams.phone" placeholder="请输入手机号" type="tel"
        disabled></van-field>
      <div class="cp-cell1">
        <van-button native-type="submit" block round type="primary" color="#CB161D">
          提交
        </van-button>
      </div>
      <!-- <div class="cp-cell">
          <a href="javascript:;">忘记密码？</a>
        </div> -->
    </van-form>
    <van-popup v-model:show="showPicker" position="bottom">
      <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
    </van-popup>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import { nicknameRules, genderRules } from "@/utils/rules";
import { getUserInfo, editUserInfo, upload } from '@/services/user'
import { uploadImage } from '@/services/consult'
import { baseURL } from '@/utils/request'
import { showToast } from 'vant'
import { useRouter } from "vue-router";
const router = useRouter()

const queryparams = ref({
})
const columns = [
  { text: '男', value: '0' },
  { text: '女', value: '1' },
];
const fileList = ref([
  { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
]);


// const emit = defineEmits<{
//   (e: 'uploadSuccess', img: Image): void
//   (e: 'deleteSuccess', item: UploaderFileListItem): void
// }>()

const afterRead: UploaderAfterRead = (item) => {
  if (Array.isArray(item)) return
  if (!item.file) return

  item.status = 'uploading'
  item.message = '上传中...'
  uploadImage(item.file)
    .then((res) => {
      console.log('res:', res);
      item.status = 'done'
      item.message = undefined
      item.url = res.filePath
      fileList.value[0].url = res.filePath
      // 同步数据
      // form.value.pictures?.push(res.data)
      // emit('uploadSuccess', res)
    })
    .catch(() => {
      // item.status = 'failed'
      item.message = '上传失败'
    })
}

// const fieldValue = ref('');
const showPicker = ref(false);

const onConfirm = (e: any) => {
  console.log('e::', e);

  showPicker.value = false;
  queryparams.value.gender = e.selectedOptions[0].text;
};
const onSubmit = async (values) => {
  // const domainRegex = baseURL;
  values.avatarUrl = fileList.value[0].url.replace(baseURL, '')
  // values.avatarUrl = queryparams.value.avatarUrl
  let { phone, ...otherParams } = values
  console.log('点击提交:  ', otherParams);
  editUserInfo({ ...otherParams }).then((res) => {
    if (res.code === 200) {
      showToast('提交成功')
      router.back()

    }
  })
};

onMounted(async () => {
  const res = await getUserInfo()
  queryparams.value = res.data
  console.log('头像:', queryparams.value.avatarUrl);
  // fileList.value[0].url = ""
  if (!queryparams.value.avatarUrl || queryparams.value.avatarUrl == "https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg") {
    fileList.value[0].url = fileList.value[0].url
  } else {
    fileList.value[0].url = baseURL + queryparams.value.avatarUrl

  }
  console.log('fileList::', fileList.value[0].url);

})

</script>
<style lang="scss" scoped>
.info-page {
  width: 375px;
  padding-top: 50px;
  min-height: calc(100vh - 50px);
  background-color: var(--cp-bg);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;

  .infoImg {
    width: 80px;
    height: 80px;
    overflow: hidden;
    margin: 20px auto;
    border-radius: 40px;
  }

  .infoForm {
    width: 345px;
    // height: 350px;
    border-radius: 10px;
    overflow: hidden;

    .cp-cell1 {
      margin-top: 100px;
    }

  }
}

.infoForm :deep(.van-field__error-message) {
  position: absolute !important;
  bottom: -18px;
}
</style>